import {
  Document,
  Edit,
  Pointer,
  Select as SelectIcon,
  Picture,
  Grid,
  List,
  TrendCharts,
  DCaret,
  Files,
  ChatDotSquare,
  PictureFilled
} from '@element-plus/icons-vue'
import { v4 as uuidv4 } from 'uuid'

// 基础组件配置
export const basicComponents = [
  {
    type: 'text',
    label: '文本',
    icon: Document,
    props: {
      content: '文本内容',
      fontSize: 14,
      color: '#333333'
    },
    defaultSpan: 12
  },
  {
    type: 'button',
    label: '按钮',
    icon: Pointer,
    props: {
      text: '按钮',
      type: 'primary',
      size: 'default'
    }
  },
  {
    type: 'input',
    label: '输入框',
    icon: Edit,
    props: {
      placeholder: '请输入',
      clearable: true
    }
  },
  {
    type: 'select',
    label: '下拉框',
    icon: SelectIcon,
    props: {
      placeholder: '请选择',
      options: [],
      clearable: true,
      multiple: false
    }
  },
  {
    type: 'image',
    label: '图片',
    icon: Picture,
    props: {
      src: '',
      fit: 'cover',
      width: '100%',
      height: 'auto'
    }
  },
  {
    type: 'divider',
    label: '分割线',
    icon: DCaret,
    props: {
      direction: 'horizontal',
      contentPosition: 'center'
    }
  }
]

// 高级组件配置
export const advancedComponents = [
  {
    type: 'table',
    label: '表格',
    icon: Grid,
    props: {
      columns: [],
      border: true,
      stripe: true,
      pageSize: 10,
      pageSizes: [10, 20, 50, 100]
    }
  },
  {
    type: 'form',
    label: '表单',
    icon: List,
    props: {
      labelWidth: '100px',
      labelPosition: 'right',
      items: [],
      showSubmit: true,
      showReset: true
    }
  },
  {
    type: 'chart',
    label: '图表',
    icon: TrendCharts,
    props: {
      type: 'line',
      title: '',
      dataSource: 'static',
      staticData: '',
      apiUrl: '',
      width: 600,
      height: 400,
      showLegend: true,
      showTooltip: true
    }
  },
  {
    type: 'tabs',
    label: '标签页',
    icon: Files,
    props: {
      type: 'card',
      items: []
    }
  },
  {
    type: 'dialog',
    label: '对话框',
    icon: ChatDotSquare,
    props: {
      title: '对话框',
      width: '500px',
      content: ''
    }
  },
  {
    type: 'carousel',
    label: '轮播图',
    icon: PictureFilled,
    props: {
      height: '300px',
      autoplay: true,
      interval: 3000,
      items: []
    }
  }
]

// 组件属性编辑器配置
export const propertyEditors = {
  text: () => import('../components/properties/TextProperties.vue'),
  button: () => import('../components/properties/ButtonProperties.vue'),
  input: () => import('../components/properties/InputProperties.vue'),
  select: () => import('../components/properties/SelectProperties.vue'),
  image: () => import('../components/properties/ImageProperties.vue'),
  table: () => import('../components/properties/TableProperties.vue'),
  form: () => import('../components/properties/FormProperties.vue'),
  chart: () => import('../components/properties/ChartProperties.vue')
}

// 组件渲染器配置
export const componentRenderers = {
  text: () => import('../components/renderers/TextRenderer.vue'),
  button: () => import('../components/renderers/ButtonRenderer.vue'),
  input: () => import('../components/renderers/InputRenderer.vue'),
  select: () => import('../components/renderers/SelectRenderer.vue'),
  image: () => import('../components/renderers/ImageRenderer.vue'),
  table: () => import('../components/renderers/TableRenderer.vue'),
  form: () => import('../components/renderers/FormRenderer.vue'),
  chart: () => import('../components/renderers/ChartRenderer.vue')
}

// 修改组件克隆函数
const handleClone = (component) => {
  return {
    id: uuidv4(),
    type: component.type,
    span: 24, // 默认占满一行
    props: { ...component.props },
    style: {},
    events: {}
  }
} 